<template>
  <div class="contract-edit-container">
    <div class="section-title">签约详情</div>

    <el-card class="form-card">
      <div class="section-subtitle">居民信息
        <el-tag :type="getTagType(form.status)">
          {{ getStatusName(form.status) }}
        </el-tag></div>

      <el-form :model="form"  label-width="80px" class="form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名" >
              <el-link
                  @click="handleNameClick"
                  type="primary"
                  :underline="false"
              >
                {{ form.name }}
              </el-link>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号">
              <span>{{ form.idCard }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <span style="cursor: pointer; color: #ff4040;">{{form.gender === 1 ? '男' : '女'}}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="年龄" >
              <span>{{ form.age }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="联系电话" >
              <span>{{ form.phone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="现居地">
              <div class="address-container">
                <span>{{ form.address }}</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="居民标签">
              <div class="tag-container">
                <el-tag
                    v-for="(tag, index) in form.tags"
                    :key="index"
                    :type="tagTypeMap[tag] || 'info'"
                    class="mr-2"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="form-card">
      <div class="section-subtitle">签约信息</div>
      <el-form :model="form"   label-width="100px" class="form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="签约编号">
              <span>{{ form.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签约状态">
              <el-tag :type="getTagType(form.status)">
                {{ getStatusName(form.status) }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签约机构" >
              <span>{{ form.instName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="签约团队">
              <span>{{ form.teamName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="签约医生" >
              <span>{{ form.doctorName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="服务包" >
              <span>{{ form.packageName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="签约周期">
              <span>{{ form.signCycle }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="费用">
              <span style=" color: #ff4040;">￥{{ form.fee }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="签约类型">
              <span>{{ form.type }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="申请时间">
              <span>{{ formatDate(form.applyTime,true) }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="生效日期">
              <span>{{ formatDate(form.effectiveDate) }}</span>
            </el-form-item>
          </el-col>

          <!-- 到期日期 - 仅在生效中(5)和已过期(6)状态下显示 -->
          <el-col :span="6" v-if="form.status === 5 || form.status === 6">
            <el-form-item label="到期日期">
              <span :style="form.status === 6 ? 'color: #ff4040;' : ''">
                {{ formatDate(form.expireDate) }}
                <el-tag v-if="form.status === 6" type="danger" size="small" style="margin-left: 8px;">已过期</el-tag>
              </span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="签约备注" class="full-width remark-with-qrcode">
          <div class="remark-content">
            <span>{{ form.remark }}</span>
            <!-- 生成二维码按钮 -->
            <el-popover
              ref="qrCodePopover"
              v-model:visible="qrCodeVisible"
              placement="top"
              width="350px"
              trigger="manual"
              :hide-after="0"
              popper-class="qrcode-popover"
            >
              <template #reference>
                <el-button 
                  type="danger" 
                  size="small"
                  :style="{ backgroundColor: '#ffcccb', borderColor: '#ffcccb', color: '#333', marginLeft: '16px' }"
                  @click="handleGenerateQRCode"
                >
                  生成二维码
                </el-button>
              </template>
              
              <!-- 二维码内容 -->
              <div class="qrcode-popover-content">
                <div class="qrcode-header">
                  <span class="qrcode-title">签约信息二维码</span>
                  <el-button 
                    type="text" 
                    @click="qrCodeVisible = false"
                    class="close-btn"
                  >
                    <el-icon><Close /></el-icon>
                  </el-button>
                </div>
                
                <div class="qrcode-content">
                  <div v-if="qrCodeLoading" class="loading-container">
                    <el-icon class="is-loading">
                      <Loading />
                    </el-icon>
                    <span style="margin-left: 10px;">正在生成二维码...</span>
                  </div>
                  
                  <div v-else-if="qrCodeUrl" class="qrcode-image">
                    <img :src="qrCodeUrl" alt="签约信息二维码" />
                    <p class="qrcode-tip">扫描二维码查看签约详情</p>
                    <div class="qrcode-actions">
                      <el-button size="small" @click="downloadQRCode">下载二维码</el-button>
                    </div>
                  </div>
                  
                  <div v-else-if="qrCodeError" class="error-container">
                    <el-alert
                      title="二维码生成失败"
                      :description="qrCodeError"
                      type="error"
                      :closable="false"
                    />
                    <div class="error-actions">
                      <el-button size="small" type="primary" @click="handleGenerateQRCode">重新生成</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-popover>
          </div>
        </el-form-item>
        
        <!-- 驳回原因显示（仅在已驳回状态时显示） -->
        <el-form-item v-if="form.status === 3" label="驳回原因" class="full-width">
          <div class="reject-reason">
            <el-alert
              :title="rejectReason || '该服务包已停止使用，请重新选择服务包再提交'"
              type="error"
              :closable="false"
              show-icon>
            </el-alert>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="form-footer">
      <!-- 状态3: 已驳回 - 只显示返回按钮 -->
      <template v-if="form.status === 3">
        <el-button @click="handleBack">返回</el-button>
      </template>
      
      <!-- 状态5: 生效中 和 状态6: 已过期 - 只显示续约和返回按钮 -->
      <template v-else-if="form.status === 5 || form.status === 6">
        <el-button type="warning" @click="handleRenew">续约</el-button>
        <el-button @click="handleBack">返回</el-button>
      </template>
      
      <!-- 其他状态显示相应按钮 -->
      <template v-else>
        <!-- 编辑按钮 - 非已驳回、生效中、已过期状态都显示 -->
        <el-button type="primary" @click="handleEdit">编辑签约信息</el-button>
        
        <!-- 状态1: 待审核 - 显示审核通过和驳回按钮 -->
        <template v-if="form.status === 1">
          <el-button type="success" @click="handleApprove">审核通过</el-button>
          <el-button type="danger" @click="handleReject">驳回</el-button>
        </template>
        
        <!-- 状态4: 待支付 - 显示提醒支付按钮 -->
        <template v-else-if="form.status === 4">
          <el-button type="warning" @click="handlePaymentReminder">提醒支付</el-button>
        </template>

        <!-- 状态2: 待服务 - 可以添加其他相关按钮 -->
        <template v-else-if="form.status === 2">
          <el-button type="primary" @click="handleStartService">开始服务</el-button>
        </template>

        <!-- 返回按钮 - 其他状态都显示 -->
        <el-button @click="handleBack">返回</el-button>
      </template>
      

    </div>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute , useRouter} from "vue-router";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import { Loading, Close } from '@element-plus/icons-vue'; // 生成二维码需要

// ==================== 基础配置和路由 ====================

const route = useRoute();
const id = ref(route.params.id);
const router = useRouter();

// ==================== 状态映射和常量定义 ====================

// 签约状态映射
const STATUS_MAP = {
  1: '待审核',
  2: '待服务', 
  3: '已驳回',
  4: '待支付',
  5: '生效中',
  6: '已过期'
};

// 反向映射：从中文状态名到数字ID
const STATUS_NAME_TO_ID = {
  '待审核': 1,
  '待服务': 2, 
  '已驳回': 3,
  '待支付': 4,
  '生效中': 5,
  '已过期': 6
};

// 状态标签颜色映射
const STATUS_TAG_MAP = {
  1: 'primary',   // 待审核 - 蓝色
  2: 'success',   // 待服务 - 绿色
  3: 'danger',    // 已驳回 - 红色
  4: 'warning',   // 待支付 - 橙色
  5: 'success',   // 生效中 - 绿色
  6: 'info'       // 已过期 - 灰色
};

// 居民标签颜色映射
const tagTypeMap = {
  '高血脂': 'danger',
  '儿童保健': 'success',
  '慢病管理': 'warning',
  '低血糖': 'primary'
};

// ==================== 表单数据和基础状态 ====================

// 签约详情表单数据
const form = ref({
  tags: [],
});

// 驳回原因存储
const rejectReason = ref('');



// ==================== 工具函数 ====================

// 日期格式化工具
const pad = (n) => String(n).padStart(2, '0');

const formatDate = (isoString, showTime = false) => {
  if (!isoString) return '';
  const date = new Date(isoString);
  let result = `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())}`;
  if (showTime) {
    result += ` ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
  }
  return result;
};

// 获取状态显示名称
const getStatusName = (statusId) => {
  let normalizedStatusId = statusId;
  
  if (typeof statusId === 'string') {
    if (STATUS_NAME_TO_ID[statusId]) {
      normalizedStatusId = STATUS_NAME_TO_ID[statusId];
    } else {
      normalizedStatusId = parseInt(statusId);
    }
  }
  
  return STATUS_MAP[normalizedStatusId] || '未知状态';
};

// 获取状态标签类型
const getTagType = (statusId) => {
  let normalizedStatusId = statusId;
  
  if (typeof statusId === 'string') {
    if (STATUS_NAME_TO_ID[statusId]) {
      normalizedStatusId = STATUS_NAME_TO_ID[statusId];
    } else {
      normalizedStatusId = parseInt(statusId);
    }
  }
  
  return STATUS_TAG_MAP[normalizedStatusId] || 'info';
};

// ==================== 数据初始化功能 ====================

// 处理不同格式的签约数据
const processContractData = (responseData) => {
  if (Array.isArray(responseData) && responseData.length > 0) {
    // 数组格式 - 合并标签
    const tagList = responseData.map(r => r.tag).filter(Boolean);
    const uniqueTags = [...new Set(tagList)];
    return { ...responseData[0], tags: uniqueTags };
  } else if (Array.isArray(responseData) && responseData.length === 0) {
    // 空数组 - 记录不存在
    return null;
  } else if (typeof responseData === 'object' && !Array.isArray(responseData)) {
    // 对象格式
    responseData.tags = responseData.tags || [];
    return responseData;
  }
  return undefined; // 数据格式不正确
};

// 处理状态字段标准化
const normalizeContractStatus = (contractData) => {
  if (contractData.status !== undefined && contractData.status !== null) {
    const originalStatus = contractData.status;
    
    if (typeof originalStatus === 'string') {
      if (STATUS_NAME_TO_ID[originalStatus]) {
        contractData.status = STATUS_NAME_TO_ID[originalStatus];
      } else {
        contractData.status = parseInt(originalStatus);
        if (isNaN(contractData.status)) {
          contractData.status = 1; // 默认为待审核
        }
      }
    } else if (typeof originalStatus === 'number') {
      contractData.status = originalStatus;
    } else {
      contractData.status = parseInt(originalStatus);
      if (isNaN(contractData.status)) {
        contractData.status = 1; // 默认为待审核
      }
    }
  } else {
    contractData.status = 1; // 默认为待审核
  }
  
  return contractData;
};

// 初始化签约详情数据
const initData = async () => {
  try {
    const response = await axios.get(`/contract/getAllContractDetail/${id.value}`);
    
    if (!response.data) {
      ElMessage.warning('未获取到签约详情数据');
      setTimeout(() => router.back(), 2000);
      return;
    }

    // 处理数据格式
    const contractData = processContractData(response.data);
    
    if (contractData === null) {
      ElMessage.error(`签约记录 ID: ${id.value} 不存在，请检查记录是否已被删除`);
      setTimeout(() => router.back(), 2000);
      return;
    }
    
    if (contractData === undefined) {
      ElMessage.warning('数据格式不正确，请检查签约记录是否存在');
      setTimeout(() => router.back(), 2000);
      return;
    }

    // 标准化状态字段
    const normalizedData = normalizeContractStatus(contractData);
    form.value = normalizedData;
    
    // 设置默认驳回原因
    if (normalizedData.status === 3 && !rejectReason.value) {
      rejectReason.value = '该服务包已停止使用，请重新选择服务包再提交';
    }
    
  } catch (error) {
    let errorMessage = '获取签约详情失败，请重试';
    
    if (error.response?.status === 404) {
      errorMessage = '签约记录不存在';
    } else if (error.response?.status === 500) {
      errorMessage = '服务器内部错误，请联系管理员';
    }
    
    ElMessage.error(errorMessage);
    setTimeout(() => router.back(), 2000);
  }
};

// ==================== 编辑相关功能 ====================

// 跳转到编辑页面
const handleEdit = () => {
  router.push({
    name: 'contract_editing',
    params: { id: form.value.id }
  });
};

// 处理姓名点击事件
const handleNameClick = () => {
  ElMessage.info(`查看居民 ${form.value.name} 的详细信息`);
  // 可扩展：跳转到居民详情页面
  // router.push({ name: 'resident-detail', params: { id: form.value.residentId } });
  router.push({name: 'ResidentDetail', query: {id: form.value.residentId}})
};

// ==================== 审核相关功能 ====================

// 审核通过处理
const handleApprove = async () => {
  try {
    await ElMessageBox.confirm(
      '确定审核通过此签约申请吗？审核通过后状态将变为待支付。', 
      '审核确认', 
      { type: 'warning' }
    );
    
    // 调用审核通过接口
    const response = await axios.post('/contract/approve', { 
      id: parseInt(form.value.id),
      status: 4, // 待支付状态
      remark: '审核通过'
    });
    
    ElMessage.success(response.data.message || '审核通过，状态已更新为待支付');
    
    // 更新本地状态并刷新数据
    form.value.status = 4;
    setTimeout(async () => {
      await initData();
    }, 500);
    
  } catch (error) {
    if (error !== 'cancel') {
      const errorMessage = error.response?.data?.message || error.message || '操作失败，请重试';
      ElMessage.error(`审核失败: ${errorMessage}`);
    }
  }
};

// 驳回申请处理
const handleReject = async () => {
  try {
    const { value: reason } = await ElMessageBox.prompt(
      '请输入驳回原因',
      '驳回签约',
      {
        inputPlaceholder: '请说明驳回的具体原因...',
        type: 'warning'
      }
    );
    
    if (!reason) return;
    
    // 调用驳回接口
    const response = await axios.post('/contract/reject', { 
      id: parseInt(form.value.id),
      status: 3, // 已驳回状态
      reason: reason
    });
    
    // 更新本地状态
    form.value.status = 3;
    rejectReason.value = reason;
    
    ElMessage.success(response.data.message || '签约已驳回');
    
    // 刷新数据
    setTimeout(async () => {
      await initData();
    }, 500);
    
  } catch (error) {
    if (error !== 'cancel') {
      const errorMessage = error.response?.data?.message || error.message || '操作失败，请重试';
      ElMessage.error(`驳回失败: ${errorMessage}`);
    }
  }
};


// ==================== 支付相关功能 ====================

// 发送支付提醒
const handlePaymentReminder = async () => {
  try {
    await ElMessageBox.confirm('确定发送支付提醒吗？', '提醒支付', {
      type: 'warning'
    });
    
    const response = await axios.post('/contract/paymentReminder', { 
      id: parseInt(form.value.id)
    });
    
    ElMessage.success(response.data.message || '支付提醒已发送');
    
  } catch (error) {
    if (error !== 'cancel') {
      const errorMessage = error.response?.data?.message || error.message || '操作失败，请重试';
      ElMessage.error(`发送支付提醒失败: ${errorMessage}`);
    }
  }
};

// ==================== 服务相关功能 ====================

// 开始提供服务
const handleStartService = async () => {
  try {
    await ElMessageBox.confirm('确定开始提供服务吗？', '开始服务', {
      type: 'warning'
    });

    // 调用开始服务接口，状态改为生效中
    const response = await axios.post('/contract/startService', {
      id: parseInt(form.value.id),
      status: 5 // 生效中状态
    });

    ElMessage.success(response.data.message || '服务已开始，合同生效');

    // 更新状态并刷新数据
    form.value.status = 5;
    setTimeout(async () => {
      await initData();
    }, 500);

  } catch (error) {
    if (error !== 'cancel') {
      const errorMessage = error.response?.data?.message || error.message || '操作失败，请重试';
      ElMessage.error(`开始服务失败: ${errorMessage}`);
    }
  }
};

// 续约处理 - 跳转到编辑页面
const handleRenew = () => {
  router.push({
    name: 'contract_editing',
    params: { id: form.value.id }
  });
};



// ==================== 二维码相关功能 ====================

// 二维码状态管理
const qrCodeVisible = ref(false);
const qrCodeLoading = ref(false);
const qrCodeUrl = ref('');
const qrCodeError = ref('');

// 生成二维码数据
const buildQRCodeData = () => {
  return {
    ...form.value,
    status: getStatusName(form.value.status) // 只需要转换状态为中文显示
  };
};

// 重置二维码状态
const resetQRCodeState = () => {
  qrCodeError.value = '';
  qrCodeUrl.value = '';
};

// 处理二维码生成
const handleGenerateQRCode = async () => {
  console.log('二维码生成 - 签约ID:', form.value.id, '居民:', form.value.name);
  
  // 重置状态
  resetQRCodeState();
  
  // 显示弹窗和加载状态
  qrCodeVisible.value = true;
  qrCodeLoading.value = true;
  
  // 添加短暂延迟确保DOM更新
  await new Promise(resolve => setTimeout(resolve, 100));

  try {
    const requestData = {
      id: form.value.id,
      contractData: buildQRCodeData()
    };
    
    // 调用后端API生成二维码
    const response = await axios.post('/qrcode/generateQRCode', requestData);

    if (response.data && response.data.qrCodeUrl) {
      qrCodeUrl.value = response.data.qrCodeUrl;
      qrCodeVisible.value = true;
      console.log('二维码生成成功 - URL:', response.data.qrCodeUrl);
    } else {
      qrCodeError.value = '二维码生成失败，请重试';
      console.log('二维码生成失败: 响应中没有qrCodeUrl');
    }
  } catch (error) {
    console.error('生成二维码失败:', error.message);
    qrCodeError.value = error.response?.data?.message || '生成二维码失败，请重试';
  } finally {
    qrCodeLoading.value = false;
  }
};

// 下载二维码
const downloadQRCode = () => {
  if (!qrCodeUrl.value) {
    ElMessage.warning('没有可下载的二维码');
    return;
  }

  try {
    const link = document.createElement('a');
    link.href = qrCodeUrl.value;
    link.download = `签约二维码_${form.value.name}_${form.value.id}.png`;
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    ElMessage.success('二维码下载成功');
  } catch (error) {
    console.error('下载失败:', error);
    ElMessage.error('下载失败，请重试');
  }
};

// ==================== 二维码功能结束 ====================

// ==================== 导航相关功能 ====================

// 返回上一页
const handleBack = () => {
  router.back();
};

// ==================== 生命周期钩子 ====================

// 组件挂载时初始化数据
onMounted(async () => {
  await initData();
});

</script>

<style scoped>
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mr-2 {
  margin-right: 8px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
}

.contract-edit-container {
  background-color: #fff;
  padding: 30px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: left;
}

.section-subtitle {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 20px;
  text-align: left;
}

.form-card {
  margin-bottom: 30px;
}

.form-footer {
  text-align: left;
  margin-top: 20px;
}

.full-width {
  width: 100%;
}

/* 签约备注行样式 */
.remark-with-qrcode {
  display: flex;
  align-items: flex-start;
}

.remark-content {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

/* 地址容器样式 */
.address-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-btn {
  margin-left: 8px;
  min-width: 28px;
  height: 28px;
  transition: all 0.3s ease;
}

.location-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
}

/* 驳回原因样式 */
.reject-reason {
  width: 100%;
}

.reject-reason .el-alert {
  border-radius: 6px;
  padding: 12px 16px;
}

.reject-reason .el-alert__title {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
}

/* ==================== 二维码冒泡窗口样式 ==================== */

/* 冒泡窗口容器 */
.qrcode-popover-content {
  padding: 0;
  max-width: 320px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 冒泡窗口头部 */
.qrcode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  background: #f8f9fa;
  border-radius: 6px 6px 0 0;
}

.qrcode-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.close-btn {
  padding: 4px;
  font-size: 16px;
  color: #909399;
}

.close-btn:hover {
  color: #409eff;
}

/* 冒泡窗口内容区域 */
.qrcode-content {
  padding: 16px;
  text-align: center;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* 加载状态 */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
  flex-direction: column;
  gap: 8px;
}

/* 二维码图片 */
.qrcode-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.qrcode-image img {
  width: 180px;
  height: 180px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.qrcode-image img:hover {
  border-color: #409eff;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

.qrcode-tip {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.qrcode-actions {
  margin-top: 8px;
}

/* 错误状态 */
.error-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-actions {
  text-align: center;
}

/* 全局冒泡窗口样式 */
:deep(.qrcode-popover) {
  padding: 0 !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid #e4e7ed;
  z-index: 9999 !important;
  background: white !important;
}

:deep(.qrcode-popover .el-popper__arrow::before) {
  border-top-color: #f8f9fa;
  }

/* ==================== 二维码样式结束 ==================== */
</style>

